<template>
	<div id="linggan">
		
		
		<div class="lingganBox">
			<span class="title">一日一灵感</span>
			<div class="day">
				<div class="content">
					<span class="img"></span>
					<img src="../../../assets/img/waguan.png" />
					<div class="textBox">
						<span class="name">乾隆款珐琅彩花卉山石纹诗句瓶</span>
						<span class="year">年代：清</span>
						<span class="introduce">腹部彩料绘主题纹饰，山石两侧，兰花月季枝叶茂盛，花开正好。空白处墨书题“夕吹撩寒馥，晨曦透暖光”诗句，源自古诗《腊梅》，诗句旁红彩绘“郁心、寿、奇”印记。......</span>
						<input type="button" value="立即了解" class="btn"/>
					</div>
				</div>
			</div>
			<span class="title title2">精选文章</span>
			<div class="wenzhang day">
				<div class="content">
					<span class="img"></span>
					<div class="textBox">
						<span class="name">宋代的美好都在汴京城里了</span>
						<span class="introduce">《长安十二时辰》的热播，让大家感受到了长安古城的雄伟辉煌，在中国古代历史上，有两座影响深远的文化高峰：唐代和宋代......</span>
						<!-- <div textBox2>
							<span class="img"></span>
							<span class="count">7212</span>
							<span class="name">创事记</span>
							<span class="zhuanti">专题</span>
						</div> -->
					</div>
					<img src="../../../assets/img/waguan.png" />
					
				</div>
				<div class="content">
					<span class="img"></span>
					<div class="textBox">
						<span class="name">宋代的美好都在汴京城里了</span>
						<span class="introduce">《长安十二时辰》的热播，让大家感受到了长安古城的雄伟辉煌，在中国古代历史上，有两座影响深远的文化高峰：唐代和宋代......</span>
						<!-- <div textBox2>
							<span class="img"></span>
							<span class="count">7212</span>
							<span class="name">创事记</span>
							<span class="zhuanti">专题</span>
						</div> -->
					</div>
					<img src="../../../assets/img/waguan.png" />
					
				</div>
				<div class="content">
					<span class="img"></span>
					<div class="textBox">
						<span class="name">宋代的美好都在汴京城里了</span>
						<span class="introduce">《长安十二时辰》的热播，让大家感受到了长安古城的雄伟辉煌，在中国古代历史上，有两座影响深远的文化高峰：唐代和宋代......</span>
						<!-- <div textBox2>
							<span class="img"></span>
							<span class="count">7212</span>
							<span class="name">创事记</span>
							<span class="zhuanti">专题</span>
						</div> -->
					</div>
					<img src="../../../assets/img/waguan.png" />
					
				</div>
			</div>
		</div>
		
		
	</div>
</template>

<script>
	
	
	
	export default{
		components:{
			
			
		}
	}
</script>

<style>
	#linggan {
		background: #FAF8F8;
	}
	
	#linggan .lingganBox{
		display: flex;
		flex-direction: column;
	}
	#linggan .day{
		margin: 0.4rem 0 0 0.12rem;
	}
	
	#linggan .wenzhang{
		
	}
	
	#linggan .wenzhang .content{
		margin-top: 0.1rem;
	}
	
	#linggan .title{
		display: inline-block;
		font-size: 0.14rem;
		color: #333333;
		opacity: 1;
		width: 1rem;
		background-image: url(../../../assets/img/score_icon_star_pre.png);
		background-size: 0.06rem 0.2rem;
		background-repeat: no-repeat;
		background-position: 0 center; 
		text-align: center;
		position: absolute;
		top: 1.47rem;
		left: 0.24rem;
	}
	
	#linggan .title2{
		top: 3.92rem;
	}
	
	#linggan .day .content{
		width: 3.51rem;
		height: 1.79rem;
		background: #F9F6EF;
		position: relative;
		display: flex;
		
	}
	
	#linggan .day .content .img{
		display: inline-block;
		width: 0.14rem;
		height: 1.79rem;
		background-image: url(../../../assets/img/inspiration%20in%20a%20day%20card_image_bg.png);
		background-size: cover;
		background-repeat: no-repeat;
		position: absolute;
		left: 0;
		top: 0;
	}
	
	#linggan .day .content img{
		width: 1.1rem;
		height: 1.46rem;
		margin: 0.14rem 0 0 0.29rem;
	}
	
	#linggan .day .content .textBox{
		display: flex;
		flex-direction: column;
		margin: 0.14rem 0 0 0.2rem;
		width: 1.67rem;
	}
	
	#linggan .day .content .textBox .name{
		font-size: 0.1rem;
		color: #B30F22;
		opacity: 1;
	}
	
	#linggan .day .content .textBox .year{
		font-size: 0.1rem;
		color: #666666;
		opacity: 1;
		margin-top: 0.08rem;
	}
	
	#linggan .day .content .textBox .introduce{
		font-size: 0.08rem;
		color: #666666;
		opacity: 1;
		margin-top: 0.12rem;
	}
	
	#linggan .day .content .textBox .btn{
		border: none;
		background-color: #C30D23;
		width: 0.58rem;
		height: 0.18rem;
		font-size: 0.1rem;
		color: #FFFCFC;
		margin-top: 0.12rem;
	}
	
	#linggan .wenzhang .textBox2{
		display: flex;
		margin-top: 0.19rem;
	}
	
	#linggan .wenzhang .textBox2 .img{
		display: inline-block;
		width: 0.08rem;
		height: 0.07rem;
		background-image: url(../../../assets/img/card_icon_notice.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}
	
	#linggan .wenzhang .textBox2  .count{
		font-size: 0.08rem;
		color: #999999;
		opacity: 1;
	}
	
	#linggan .wenzhang .textBox2  .name{
		width: 24px;
height: 11px;
font-size: 8px;
font-family: PingFang SC;
font-weight: 400;
line-height: 11px;
color: #999999;
opacity: 1;
	}
</style>
